<template>
    <div class="mydoc">
        <el-row>
            <el-col :span="5" :offset="2">
                <el-input placeholder="请输入文档名、标签、描述" v-model="searchName" :clearable="true">
                </el-input>
            </el-col>
            <el-col :span="5" :offset="1">
                <el-input placeholder="请输入用户名" v-model="userName" :clearable="true">
                </el-input>
            </el-col>
            <el-col :span="1" :offset="1">
                <el-button type="primary" @click="getDocList" icon="el-icon-search">搜索</el-button>
            </el-col>
            <el-col :span="1" :offset="1">
                <el-button type="primary" @click="reSet" icon="el-icon-refresh">重置</el-button>
            </el-col>
            <el-col :span="4" :offset="2">
                <el-button type="success" icon="el-icon-plus" @click="addOpen">新增文档</el-button>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <div class="cardDiv" v-infinite-scroll="loadDocList">
            <el-backtop target=".cardDiv">
                    回到顶部
            </el-backtop>
            <el-card v-if="docs==null||docs.length<=0" class="nullCar">
                暂无文档
            </el-card>
                    <el-card v-for="doc in docs" :key="doc.id" shadow="hover" class="docCar">
                        <div slot="header">
                            <el-row>
                                <el-col :span="24" style="text-align: center;color: #606266;">
                                    上传者：{{doc.userName}}
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="20">
                                    <div class="filename">
                                        文件名：{{doc.name}}
                                    </div>

                                </el-col>
                                <el-col :span="4">
                                    <el-link style="float:right" type="primary" :href="doc.path" target="_blank"><i class="el-icon-download"></i> 下载</el-link>
                                    <el-link style="float:right" type="warning" :href="'http://view.officeapps.live.com/op/view.aspx?src='+doc.path" target="_blank"><i class="el-icon-view"></i> 查看</el-link>
                                    <el-link v-if="doc.userId==userId" style="float:right" type="success" @click="updatDoc(doc)"><i class="el-icon-edit"></i> 修改</el-link>
                                    <el-link v-if="doc.userId==userId" style="float:right" type="danger" @click="deleteDoc(doc.id)"><i class="el-icon-delete"></i> 删除</el-link>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="context">
                            {{doc.description}}
                        </div>
                        <el-row>
                            <el-col :span="13">
                                <el-tag v-if="doc.tag!=null">{{doc.tag}}</el-tag>
                            </el-col>
                            <el-col :span="11">
                                <div style="text-align: right;vertical-align: middle;">
                                    {{doc.createTime}}
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>

        </div>
<!--        新增-->
        <el-drawer
            title="新增文档"
            :visible.sync="addDra"
            size="50%"
        >
            <el-divider></el-divider>
            <el-row>
                <el-col :span="4" :offset="8">文档：</el-col>
                <el-col :span="8">
                    <el-upload accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation"
                            action="/api/doc/upload" :with-credentials="true" :on-success="uploadSucc" :limit="1" :multiple="false" :file-list="fileList">
                        <el-button size="small" type="primary" icon="el-icon-upload">
                            点击上传
                        </el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="4" :offset="8">标签：</el-col>
                <el-col :span="8">
                    <el-input
                            type="text"
                            placeholder="请输入文档标签"
                            v-model="doc.tag">
                    </el-input>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="4" :offset="8">描述：</el-col>
                <el-col :span="8">
                    <el-input
                            type="textarea"
                            :rows="9"
                            placeholder="请输入描述"
                            v-model="doc.description">
                    </el-input>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="4" :offset="10">
                    <el-button type="success" :disabled="addButDis" @click="addDoc" icon="el-icon-plus">添加</el-button>
                </el-col>
            </el-row>
        </el-drawer>
<!--        新增end-->

<!--        修改-->
        <el-drawer
                title="修改文档"
                :visible.sync="updateDra"
                direction="ltr"
                size="50%"
        >
            <el-divider></el-divider>
            <el-row>
                <el-col :span="4" :offset="8">标签：</el-col>
                <el-col :span="8">
                    <el-input
                            type="text"
                            placeholder="请输入文档标签"
                            v-model="udoc.tag">
                    </el-input>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="4" :offset="8">描述：</el-col>
                <el-col :span="8">
                    <el-input
                            type="textarea"
                            :rows="11"
                            placeholder="请输入描述"
                            v-model="udoc.description">
                    </el-input>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
                <el-col :span="4" :offset="10">
                    <el-button type="success" @click="updateDoc" icon="el-icon-edit">修改</el-button>
                </el-col>
            </el-row>
        </el-drawer>
<!--        修改end-->
    </div>
</template>

<script>
    export default {
        name: "MyDoc",
        data(){
            return{
                searchName:'',
                userName:'',
                docs:[],
                addDra:false,
                addButDis:true,
                limitNum: 6,
                doc:{
                    name:'',
                    path:'',
                    description:'',
                    tag:''
                },
                fileList: [],
                //修改
                updateDra: false,
                udoc:{},
                userId: 0
            }
        },
        mounted() {
            //获取列表
            this.getDocList();
            this.getNowUserId();
        },
        methods:{
            getNowUserId() {
                let _this = this;
                _this.$axios.get('user/now')
                    .then(res => {
                        let result= res.data;
                        if (result.status == 200) {
                            let data=result.data;
                            _this.userId = data.id;
                        }else if (result.status == 500) {
                            _this.$message.error(result.message);
                        }
                    })
            },
            addOpen() {
                this.doc = {
                    name: '',
                    path: '',
                    description: '',
                    tag: ''
                };
                this.fileList = [];
                this.addDra=true
            },
            deleteDoc(id) {
                var _this = this;
                _this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.$axios.delete("doc/delete/"+id)
                        .then(res=>{
                            var result = res;
                            if (result.status == 200) {
                                _this.$message.success(result.message);
                                _this.getDocList();
                            }else if (result.status == 500) {
                                _this.$message.error(result.message);
                            }
                        })
                })

            },
            //打开修改
            updatDoc(doc){
                //拷贝对象
                this.udoc = JSON.parse(JSON.stringify(doc));
                //打开
                this.updateDra = true;

            },
            reSet() {
                this.searchName = '';
                this.userName = '';
                this.limitNum = 6;
                this.getDocList();
            },
            //获取doc列表
            getDocList() {
                var _this = this;

                _this.$axios.get("doc/docs/all",{params:{
                        keyWord:_this.searchName,
                        userName:_this.userName,
                        limitNum: _this.limitNum
                    }}).then(res=>{
                    var result = res.data;
                    if (result.status == 200) {
                        console.log(result);
                        _this.docs=result.data;
                    }else if (result.status == 500) {
                        _this.$message.error(result.message);
                    }
                })
            },
            //加载下面的doclist
            loadDocList() {
                this.limitNum = this.limitNum * 2;
                this.getDocList();
            },
            //上传文件成功
            uploadSucc(res,file){
                if (res.status == 200){
                    this.$message.success("上传成功");
                    this.doc.path = res.data;
                    this.doc.name=file.name;
                    this.addButDis = false;
                }else {
                    this.$message.error(res.message);
                }

            },

            //添加doc
            addDoc() {
                var _this = this;

                _this.$axios.post("doc/add",_this.$Qs.stringify(_this.doc),{
                    headers:{'Content-Type':'application/x-www-form-urlencoded'}
                }).then(res=>{
                    var result = res.data;
                    if (result.status == 200) {
                        _this.$message.success(result.message);
                        _this.getDocList();
                        _this.addDra = false;
                        _this.doc = {
                            name: '',
                            path: '',
                            description: '',
                            tag: ''
                        };
                        _this.addButDis = true;
                    }else if (result.status == 500) {
                        _this.$message.error(result.message);
                    }
                })
            },
            updateDoc() {
                var _this = this;
                _this.$axios.post("doc/update",_this.$Qs.stringify(_this.udoc),{
                    headers:{'Content-Type':'application/x-www-form-urlencoded'}
                }).then(res=>{
                    var result = res.data;
                    if (result.status == 200) {
                        _this.$message.success(result.message);
                        _this.getDocList();
                        _this.updateDra = false;
                        _this.udoc = {};
                    }else if (result.status == 500) {
                        _this.$message.error(result.message);
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .docCar {
        float: left;
        width: 32%;
        height: 280px;
        margin-right: 1%;
        margin-bottom: 20px;
    }
    .cardDiv{
        width: 100%;
        height: 375px;
        overflow: auto;
    }
    .filename{
        height: 57px;
        line-height: 28px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
        color: #606266;
    }
    .context{
        height: 82px;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        color: #606266;
    }
    .nullCar {
        text-align: center;
        height: 200px;
        line-height: 160px;
        font-size: 25px;
        color: #606266;
    }

</style>